<template>
  <div>
    <h1>事件处理</h1>
    <button @click.once="aaa">AAA</button>

    <div class="aa" @click="aaa" @click.capture="aaa1">
      AA
      <div class="bb" @click="bbb" @click.capture="bbb1">
        BB
        <div class="cc" @click="ccc" @click.capture="ccc1">CC</div>
      </div>
    </div>
  </div>
</template>

<script>
//VUE选项
export default {
  name: "HomeComp2",
  data() {
    return {};
  },
  methods: {
    aaa: function (evt) {
      console.log("aa冒泡");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
    bbb(evt) {
      console.log("bb冒泡");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
    ccc(evt) {
      console.log("cc冒泡");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
    aaa1: function (evt) {
      console.log("aa捕获");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
    bbb1(evt) {
      console.log("bb捕获");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
    ccc1(evt) {
      console.log("cc捕获");
      console.log(evt.target);
      console.log(evt.currentTarget);
    },
  },
};
</script>

<style scoped>
.aa {
  width: 300px;
  height: 300px;
  background: #6aacef;
  .bb {
    width: 200px;
    height: 200px;
    background: #aaaaaa;
    .cc {
      width: 100px;
      height: 100px;
      background: #63a35c;
    }
  }
}
</style>
